<template>
  <div id="newNutritionPrescription">
    <van-nav-bar title="新增营养处方" left-arrow left-text="返回" @click-left="onClickLeft" fixed placeholder>
      <template #right >
        <span @click="$router.push(`/NutritionPrescriptionList/${detailId}`)">历史营养处方</span>
      </template>
    </van-nav-bar>
    <van-form>
      <div class="main">
        <div class="prescription">
          <h1>营养处方</h1>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="20">
              <van-field
                maxlength="6"
                required
                name="nengliang"
                v-model="form.nengliang"
                label="建议摄入能量"
                placeholder="请输入"
                type="number"
                :rules="[{ required: true, message: '请输入摄入能量！' }]"
              />
            </van-col>
            <van-col span="3" class="company">千卡</van-col>
          </van-row>
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="21">
              <van-field
                maxlength="6"
                required
                name="danbaizhi"
                v-model="form.danbaizhi"
                label="建议摄入蛋白质"
                placeholder="请输入"
                type="number"
                :rules="[{ required: true, message: '请输入摄入蛋白质！' }]"
              />
            </van-col>
            <van-col span="3" class="company">g</van-col>
          </van-row>
        </div>
        <!-- 早中晚 膳食 -->
        <div class="dietprescription" id="sscf">
          <h1>膳食处方</h1>
          <div class="breakfast" id="sscfZao">
            <div class="break">
              <img src="@/assets/images/Dietzc_img.png" alt />
              <van-field
                readonly
                clickable
                right-icon="arrow"
                name="zc_time"
                :value="form.zc_time"
                label="早餐"
                placeholder="请选择"
                @click="showPicker = true"
              />
              <van-popup v-model="showPicker" position="bottom">
                <van-datetime-picker :value="form.zc_time" type="time" @confirm="onClick1" @cancel="showPicker = false" />
              </van-popup>
            </div>
            <van-field name="zc_ty" label="食品方式" input-align="right">
              <template #input>
                <van-radio-group v-model="form.zc_ty" direction="horizontal" @change="breakChange">
                  <van-radio v-for="(item,item1) in foodType" :key="item1" :name='item.id'>{{item.title}}</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              class="button_bom"
              readonly
              clickable
              name="picker"
              v-model="form.breakfast"
              label="食品套餐"
              placeholder="请选择食品套餐"
              right-icon="arrow"
              @click="onChange(form.zc_ty, 'breakfast')"
            />

          </div>
          <div class="lunch" id="sscfZhong">
            <div class="break">
              <img src="@/assets/images/Dietwuc_img.png" alt />
              <van-field
                readonly
                clickable
                right-icon="arrow"
                name="wc_time"
                :value="form.wc_time"
                label="午餐"
                placeholder="请选择"
                @click="showPicker1 = true"
              />
              <van-popup v-model="showPicker1" position="bottom">
                <van-datetime-picker
                  type="time"
                  :value="form.wc_time"
                  @confirm="onLunchTime"
                  @cancel="showPicker1 = false"
                />
              </van-popup>
            </div>
            <van-field name="wc_ty" label="食品方式" input-align="right">
              <template #input>
                <van-radio-group v-model="form.wc_ty" direction="horizontal" @change="lunchChange">
                  <van-radio v-for="(item,item2) in foodType" :key="item2" :name="item.id">{{item.title}}</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              class="button_bom"
              readonly
              clickable
              name="picker"
              v-model="form.lunch"
              label="食品套餐"
              placeholder="请选择食品套餐"
              right-icon="arrow"
              @click="onChange(form.wc_ty, 'lunch')"
            />
           
          </div>
          <div class="dinner" id="sscfWan">
            <div class="break">
              <img src="@/assets/images/Dietwc_img.png" alt />
              <van-field
                readonly
                clickable
                right-icon="arrow"
                name="d_time"
                :value="form.d_time"
                label="晚餐"
                placeholder="请选择"
                @click="showPicker2 = true"
               
              />
              <van-popup v-model="showPicker2" position="bottom">
                <van-datetime-picker
                  type="time"
                  :value="form.d_time"
                  @confirm="onDinnerTime"
                  @cancel="showPicker2 = false"
                />
              </van-popup>
            </div>

            <van-field name="dinnerRadio1" label="食品方式" input-align="right" >
              <template #input>
                <van-radio-group v-model="form.d_ty" direction="horizontal" @change="dinnerChange">
                  <van-radio v-for="(item,item3) in foodType" :key="item3" :name="item.id">{{item.title}}</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              class="button_bom"
              readonly
              clickable
              name="picker"
              v-model="form.dinner"
              label="食品套餐"
              placeholder="请选择食品套餐"
              right-icon="arrow"
              @click="onChange(form.d_ty, 'dinner')"
            />
          </div>
        </div>
        <!-- 口服营养方案 -->
        <div class="oral" id="kfyyfa">
          <h1 >口服营养方案</h1>
          <div class="oralBox" v-for="(item,index) in oral" :key="index">
            <van-field
              readonly
              clickable
              name="administration"
              :value="item.time"
              label="口服时间"
              right-icon="arrow"
              placeholder="请选择口服时间"
              @click="Picker3(index)"
            />
            <van-popup v-if="timeIdx == index" v-model="showPicker3" position="bottom">
              <van-datetime-picker type="time" :value="item.time"  @confirm="ondateConfirm" @cancel="showPicker3 = false" />
            </van-popup>
            <van-field
              class="textacer"
              autosize
              type="textarea"
              readonly
              clickable
              name="picker"
              :value="item.title + item.info"
              label="辅助食品"
              :placeholder="item.title == '' ? '请选择辅助食品' :  item.info"
              right-icon="arrow"
              @click="onProduct($event,index)"
            />
            <div v-if="form.list" class="content">
              <van-row
                type="flex"
                justify="space-between"
                align="center"
                v-for="item in form.list"
                :key="item.id"
              >
                <van-col span="6">{{ item.name }}</van-col>
                <van-col span="6">
                  <van-field v-model="item.num" />
                </van-col>
              </van-row>
            </div>
          </div>
          <div class="btn">
            <div class="add" @click="addOral">
              <img src="@/assets/images/add.png" alt />
            </div>
            <div class="del" @click="delOral">
              <img src="@/assets/images/del_img.png" alt />
            </div>
          </div>
        </div>
        <!-- 建议加餐 -->
        <div class="extrameals" id="jyjc">
          <h1>加餐建议</h1>
          <div class="extramealsBox" v-for="(item,index) in  extrameals" :key="index">
            <van-field
              readonly
              clickable
              name="datetimePicker"
              :value=" item.time "
              label="加餐时间"
              right-icon="arrow"
              placeholder="请选择加餐时间"
              @click="showjc(index)"
            />
            <van-popup v-if="timeIdx == index" v-model="showjcPicker" position="bottom">
              <van-datetime-picker  :value="item.time" type="time" @confirm="onjcConTime" @cancel="showjcPicker = false" />
            </van-popup>
            <van-field
              class="textacer"
              autosize
              type="textarea"
              readonly
              clickable
              name="picker"
              :value="item.title + item.info"
              label="加餐食品"
              placeholder="请选择加餐食品"
              right-icon="arrow"
              @click="showSptc($event,index)"
            />
          </div>
          <div class="btn">
            <div class="add" @click="addExtrameals">
              <img src="@/assets/images/add.png" alt />
            </div>
            <div class="del" @click="delExtrameals">
              <img src="@/assets/images/del_img.png" alt />
            </div>
          </div>
        </div>

        <!-- 运动处方 -->
       
        <van-popup v-model="exerciseModeShow" position="bottom">
          <van-picker
            show-toolbar
            :columns="exerciseMode"
            @confirm="onExerciseMode"
            @cancel="exerciseModeShow = false"
          />
        </van-popup>
        <div class="exercise">
          <h1>运动处方</h1>
          <div class="exerciseBox" v-for="(item,index) in  exercise" :key="index">
            <van-field
              readonly
              clickable
              name="datetimePicker($event,index)"
              :value="item.time"
              label="运动时间"
              right-icon="arrow"
              placeholder="请选择运动时间"
              @click="dateTimePicker(index)"
            />
           <van-popup  
            v-if="timeIdx == index" 
            v-model="showjcPicker5"
            position="bottom">
            <van-datetime-picker
            
              :value="item.time"
              type="time"
              @confirm="onExerciseTime"
              @cancel="showjcPicker5 = false"
            />
            </van-popup>
            <van-field
              readonly
              clickable
              name="picker"
              :value="item.title"
              label="运动方式"
              placeholder="请选择运动方式"
              right-icon="arrow"
              @click="ydModeShow(index)"
            />

            <van-row type="flex" justify="space-between" align="center">
              <van-col span="20">
                <van-field
                  maxlength="6"
                  v-model="item.shichang"
                  label="运动时间"
                  placeholder="请输入"
                  type="number"
                />
              </van-col>
              <van-col span="3" class="company">分钟</van-col>
            </van-row>
          </div>
          <div class="btn">
            <div class="add" @click="addExercise">
              <img src="@/assets/images/add.png" alt />
            </div>
            <div class="del" @click="delExercise">
              <img src="@/assets/images/del_img.png" alt />
            </div>
          </div>
        </div>

        <div class="principle" id="principle">
          <div class="title">
            <h1>解决方案</h1>
            <div class="titBtn">
              <div class="titBtnLeft" @click="textTemplate">
                <img src="@/assets/images/muban_left.png" alt />
                <p>选择模板</p>
              </div>
              <div class="titBtnLeft" @click="videoList">
                <img src="@/assets/images/muban_right.png" alt />
                <p>选择视频</p>
              </div>
            </div>
          </div>
          <div class="yd_textarea">
            <van-field
              v-model="form.zlyz_info"
              rows="4"
              autosize
              label
              type="textarea"
              placeholder="请输入"
            />
          </div>
          <div class="video">
            <p class="del_video" @click="del_video"  v-if="form.zlyz_video || this.playerOptions['sources'][0]['src']">删除</p>
            <video-player
              v-if="form.zlyz_video || this.playerOptions['sources'][0]['src']"
              class="video-player vjs-custom-skin"
              ref="videoPlayer"
              :playsinline="true"
              :options="playerOptions"
              @play="onPlayerPlay"
            ></video-player>
          </div>
        </div>
        <div>
          <div class="yulan" type="primary" @click="toPreview">预览</div>
          <van-button native-type="submit" @click="submit" type="info">提交</van-button>
        </div>
      </div>
    </van-form>
  </div>
</template>

<script>
import { addchufang } from "@/apis/treatmentplan";
import { yulanchufang } from "@/apis/treatmentplan";
import { chufangoption } from "@/apis/record";
export default {
  data() {
    return {
      detailId: null,
      timeIdx: "",
      time:'07:00',
      showzSptc: false,
      showlSptc: false,
      showwSptc: false,
      showPicker: false,
      showPicker1: false,
      showPicker2: false,
      showPicker3: false,
      showPicker4: false,
      showjcPicker: false,
      showjcPicker5: false,
      exerciseModeShow: false,
      extrameals: [{ time: "06:30", title: "", info: "" },{ time: "08:00", title: "", info: "" },{ time: "10:00", title: "", info: "" },{ time: "14:00", title: "", info: "" },{ time: "19:00", title: "", info: "" }],
      oral: [{ time: "07:30", title: "", info: "" },{ time: "09:00", title: "", info: "" },{ time: "12:30", title: "", info: "" },{ time: "15:00", title: "", info: "" },{ time: "18:30", title: "", info: "" },{ time: "20:00", title: "", info: "" }],
      exercise: [{ time: "06:00", title: "", info: "", shichang: "" },{ time: "13:00", title: "", info: "", shichang: "" },{ time: "18:30", title: "", info: "", shichang: "" }],
      exerciseMode: [],
      Extrafood: ["牛奶", "鸡蛋"],
      minDate: new Date(1940, 1, 1),
      value: "",
      text: '',
      foodType:'',
      form: {
        id: "",
        hzid: "",
        action: "add",
        nengliang: "",
        danbaizhi: "",
        zc_time: "07:00",
        zc_ty: 1,
        zc_taocan_id: "",
        zc_taocan_title: "",
        zc_taocan_info: "",
        zc_taocan_video: "",
        zc_taocan_video_poster: "",
        wc_time: "12:00",
        wc_ty: 1,
        wc_taocan_id: "",
        wc_taocan_title: "",
        wc_taocan_info: "",
        wc_taocan_video: "",
        wc_taocan_video_poster: "",
        d_time: "18:00",
        d_ty: 1,
        d_taocan_id: "",
        d_taocan_title: "",
        d_taocan_info: "",
        d_taocan_video: "",
        d_taocan_video_poster: "",
        administration: "",
        extraMeal: "",
        lunch: "",
        dinner: "",
        breakfast: "",
        jibing: "",
        message: "",
        birthday: "",
        zlyz_info: "",
        zlyz_video: "",
        zc_index: "",
        wc_index: "",
        d_index: "",
      },
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: ``, //url地址
          },
        ],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    food() {
       chufangoption({hzid:this.form.hzid, ty: 0, pid:0 })
        .then((res) => {
          ////console.log(res.data);
          this.foodType = res.data.list;
        })

    },
    // 早餐时间
    onClick1(time) {
      this.form.zc_time = time;
      this.showPicker = false;
    },
    breakChange() {
        this.form.breakfast = ""
        this.form.zc_taocan_id = ""
        this.form.zc_taocan_title = ""
        this.form.zc_taocan_info = ""
        this.form.zc_taocan_video = ""
        this.form.zc_taocan_video_poster = ""
    },
    // 午餐时间
    onLunchTime: function (time) {
      this.form.wc_time = time;
      this.showPicker1 = false;
    },
    lunchChange() {
      this.form.lunch = ""
      this.form.wc_taocan_id = ""
      this.form.wc_taocan_title = ""
      this.form.wc_taocan_info = ""
      this.form.wc_taocan_video = ""
      this.form.wc_taocan_video_poster = ""
    },
    // 晚餐时间
    onDinnerTime: function (time) {
      this.form.d_time = time;
      this.showPicker2 = false;
    },
    dinnerChange() {
      this.form.dinner = ""
      this.form.d_taocan_id = ""
      this.form.d_taocan_title = ""
      this.form.d_taocan_info = ""
      this.form.d_taocan_video = ""
      this.form.d_taocan_video_poster = ""
    },
    onConfirm(date) {
      this.form.birthday = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()}`;
      this.showzSptc = false;
    },
    onChange(val, item) {
      localStorage.setItem("form", JSON.stringify(this.form));
      //console.log(val);
      // if (val === "1") {
        this.$router.push(`/SoftFood/${item}/${val}`);
      // } else if (val === "2") {
      //   this.$router.push(`/SemiLiquidFood/${item}`);
      // } else if (val === "3") {
      //   this.$router.push(`/Homogenate/${item}`);
      // }
    },
    // 加餐食物
    onProduct($event, index) {
      this.oral[index].title = ""
      this.oral[index].info  = ""
      localStorage.setItem("form", JSON.stringify(this.form));
      localStorage.setItem("oral", JSON.stringify(this.oral));
      this.$router.push(`/TakingProducts/${index}`);
    },
    // 增加口服方案
    Picker3(index) {
      this.timeIdx = index;
      this.showPicker3 = true;
    },
    // 口服时间
    ondateConfirm(time) {
      //console.log(event)
      this.oral[this.timeIdx].time = time;
      this.showPicker3 = false;
    },
    addOral() {
      let obj = { time: "", title: "", info: "" };
      this.oral.push(obj);
    },
    delOral() {
      let obj = this.oral;
      if (obj.length > 1) {
        obj.pop();
      }
    },
    // 建议加餐
    onjcConTime(time) {
      this.extrameals[this.timeIdx].time = time;
      this.showjcPicker = false;
    },
    showjc(index) {
      this.timeIdx = index;
      this.showjcPicker = true;
    },
    showSptc($event, index) {
      this.extrameals[index].title = ""
      this.extrameals[index].info  = ""
      localStorage.setItem("form", JSON.stringify(this.form));
      localStorage.setItem("extrameals", JSON.stringify(this.extrameals));
      this.$router.push(`/ExtraMeal/${index}`);
    },
  
    addExtrameals() {
      let obj = { time: "", title: "", info: "" };
      this.extrameals.push(obj);
    },
    delExtrameals() {
      let obj = this.extrameals;
      if (obj.length > 1) {
        obj.pop();
      }
    },
  
    // 建议运动
    ydchufang() {
      chufangoption({hzid:this.form.hzid, ty: 3, pid: 0 })
        .then((res) => {
          //console.log(res.data.list);
          for (let i = 0; i < res.data.list.length; i++) {
            if (res.data.list[i].title != "") {
              this.exerciseMode.push(res.data.list[i].title);
            }
          }
        })
        
    },
    dateTimePicker(index) {
      this.showjcPicker5 = true;
      this.timeIdx = index;
    },
    ydModeShow(index) {
      // this.ydchufang();
      this.exerciseModeShow = true;
      this.timeIdx = index;
    },
    onExerciseTime(time) {
      this.exercise[this.timeIdx].time = time;
      this.showjcPicker5 = false;
    },
    onExerciseMode(val) {
      this.exercise[this.timeIdx].title = val;
      this.exerciseModeShow = false;
    },
    addExercise() {
      let obj = { time: "", title: "", info: "", shichang: "" };
      this.exercise.push(obj);
    },
    delExercise() {
      let obj = this.exercise;
      if (obj.length > 1) {
        obj.pop();
      }
    },
    // 选择模板
    textTemplate() {
      localStorage.setItem("form", JSON.stringify(this.form));
      localStorage.setItem("text", JSON.stringify(this.text));
      localStorage.setItem("exercise", JSON.stringify(this.exercise));
      this.$router.push(`/textTemplate/`);
    },
    videoList() {
      localStorage.setItem("form", JSON.stringify(this.form));
      localStorage.setItem("video", this.form.zlyz_video);
      localStorage.setItem("exercise", JSON.stringify(this.exercise));
      this.$router.push(`/videoList/`);
    },
    // 删除视频
    del_video() {
      this.form.zlyz_video = ""
      this.playerOptions["sources"][0]["src"] = this.form.zlyz_video;
      localStorage.setItem("form", JSON.stringify(this.form));
      localStorage.setItem("chufangform", JSON.stringify(this.form));
      localStorage.removeItem("video")
    },
    onPlayerPlay() {
      let playbut = document.getElementsByClassName("vjs-big-play-button");
      playbut[0].style.display = "none";
    },
    // 预览
    toPreview() {
      var that = this
      var oralCopy = []
      var extramealsCopy = []
      var exerciseCopy = []
      this.oral.forEach(function(item,index) {
        if(item.info !== ''){
          oralCopy.push(item)
        }
      })
       this.extrameals.forEach(function(item,index) {
        if(item.info !== ''){
          extramealsCopy.push(item)
        }
      })
       this.exercise.forEach(function(item,index) {
        if(item.title != ''){
          exerciseCopy.push(item)
        }
      })
      this.form.koufuyingyang = oralCopy;
      this.form.jiacan = extramealsCopy;
      this.form.yundong = exerciseCopy;
      localStorage.setItem('submitForm', JSON.stringify(this.form))
      
      if(this.form.nengliang == "") {
        this.$toast('请填写建议摄入能量');
      }else if(this.form.danbaizhi == ""){
        this.$toast('请填写建议摄入蛋白质');
      }else {
        yulanchufang(this.form)
        .then((res) => {
          if(res.codes == "200"){
            //console.log(res)
            localStorage.setItem('yulan',JSON.stringify(res.data))
            this.$router.push('/preview');
          }
        })
        .catch((err) => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
     }
      
      
    },
    // TakingProducts
    // submit
    submit(values) {
      if(this.form.nengliang == "") {
        this.$toast('请填写建议摄入能量');
      }else if(this.form.danbaizhi == ""){
        this.$toast('请填写建议摄入蛋白质');
      }else {
        var that = this
        var oralCopy = []
        var extramealsCopy = []
        var exerciseCopy = []
        this.oral.forEach(function(item,index) {
          if(item.info !== ''){
            oralCopy.push(item)
          }
        })
        this.extrameals.forEach(function(item,index) {
          if(item.info !== ''){
            extramealsCopy.push(item)
          }
        })
        this.exercise.forEach(function(item,index) {
          if(item.title != ''){
            exerciseCopy.push(item)
            //console.log(exerciseCopy)
          }
        })
        
        this.form.koufuyingyang = oralCopy;
        this.form.jiacan = extramealsCopy;
        this.form.yundong = exerciseCopy;
        //console.log(this.form)
        addchufang(this.form)
          .then((res) => {
            this.$toast("新建营养处方成功");
            this.onClickLeft();
            localStorage.clear();
          })
          .catch((err) => {
            if(err.msg){
              this.$toast(err.msg);
            }else{
              this.$toast("网络错误"); 
            }
          });
      }
    },
  },
  mounted(){
    
    this.ydchufang();
    this.food()
    this.form.hzid = this.$route.params.id;
    if(this.form.zlyz_video !== ''){
      this.playerOptions["sources"][0]["src"] = this.form.zlyz_video;
    }
    let arr = localStorage.getItem("chufangOral");
    let arr1 = localStorage.getItem("chufangExtrameals");
    let exercise = localStorage.getItem("chufangExercise");
    if (arr !== null) {
      this.oral = JSON.parse(arr);
    }
     if (arr1 !== null) {
      this.extrameals = JSON.parse(arr1);
    }
    if (exercise !== null) {
      this.exercise = JSON.parse(exercise);
    }
    var selector = localStorage.getItem("selector")
    if(selector){
      var anchor = this.$el.querySelector(selector)
      document.documentElement.scrollTop = anchor.offsetTop
      localStorage.removeItem("selector")
    }
  },
  created() {
    this.detailId = this.$route.params.id;
    localStorage.setItem('hzid',this.$route.params.id)
    this.form.hzid = this.$route.params.id;
    let txt = localStorage.getItem("text");
    let arr = localStorage.getItem("chufangOral");
    let arr1 = localStorage.getItem("chufangExtrameals");
    let arr2 = localStorage.getItem("chufangform");
    let video = localStorage.getItem("video");
    let exercise = localStorage.getItem("chufangExercise");
    if (arr !== null) {
      this.oral = JSON.parse(arr);
    }
    if (arr1 !== null) {
      this.extrameals = JSON.parse(arr1);
    }
    if (arr2 !== null) {
      this.form = JSON.parse(arr2);
    }
    if (txt !== null) {
      this.text = JSON.parse(txt);
      this.form.zlyz_info = this.text;
    }
    if (video !== null) {
      this.form.zlyz_video = video;
      this.playerOptions["sources"][0]["src"] = video;
    }
    if (exercise !== null) {
      this.exercise = JSON.parse(exercise);
    }

  },
  destroyed() {
    localStorage.setItem("chufangform", JSON.stringify(this.form));
    localStorage.setItem("chufangExercise", JSON.stringify(this.exercise));
    localStorage.setItem("chufangOral", JSON.stringify(this.oral));
    localStorage.setItem("chufangExtrameals", JSON.stringify(this.extrameals));
  }
  
};
</script>

<style lang="less">
#newNutritionPrescription {
  .yulan{
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    background-color: #07c160;
  }
  input {
    width: 100%;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }
  .textacer {
    padding-top: 8px;
    .van-cell__value {
      .van-field__control {
        padding-top: 12px;
      }
    }
    .van-cell__title {
      padding-top: 12px;
    }
  }

  .input_auto {
    overflow: auto;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 0.13333rem;
    background-color: rgba(0, 0, 0, 0.2);
  }
  text-align: left;
  .van-nav-bar__left {
    .van-icon,.van-nav-bar__text {
     color: #404040;
    }
  }
  .foodMain {
    margin: 10px 10px;
    box-shadow: 0px 2px 4px 0px rgba(230, 230, 230, 0.5);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .food {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    margin: 10px 0;
    background-color: #fff;
    .van-row {
      position: relative;
      border-bottom: none !important;
    }
    .van-col {
      &:first-child {
        position: absolute;
        background-color: #4589ed;
        height: 100%;
        font-size: 30px;
        color: #fff;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        width: 25%;
      }
      .num {
        width: 100%;
        height: 42px;
        text-align: center;
        font-size: 30px;
        line-height: 40px;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -20px;
      }
      .content {
        min-height: 40px;
        padding: 9px 0 9px 9px;
        div {
          margin-bottom: 15px;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .van-divider {
    border-color: transparent;
    margin: 10px 0;
  }
  .van-nav-bar__right {
    color: #3660c8;
    font-size: 14px;
  }
  h1 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .main {
    .company {
      font-size: 15px;
    }
    margin: 15px;
    .van-row {
      border-bottom: 1px solid #f5f5f5;
    }

    .prescription,
    .dietprescription,
    .oral,
    .extrameals,
    .exercise,
    .principle {
      padding: 20px 15px 0;
      border-radius: 8px;
      background-color: #fff;
      margin-bottom: 15px;
      .breakfast,
      .lunch,
      .dinner {
        .van-radio--horizontal{
          margin-bottom: 10px;
        }
        padding-top: 20px;
        img {
          height: 17px;
        }
      }
      .btn {
        display: flex;
        flex-direction: row-reverse;
        .del {
          img {
            width: 39px;
            margin: 22px 34px 24px 0;
          }
        }
        .add {
          text-align: right;
          img {
            width: 39px;
            margin: 22px 0 24px;
          }
        }
      }
      .van-cell {
        padding: 20px 0;
        &::after {
          right: 0;
          left: 0;
        }
        .van-field__label {
          font-size: 15px;
          margin-left: 5px;
          width: 120px;
        }
      }
      .textacer {
        padding-top: 8px;
      }
      .extramealsBox,
      .oralBox,
      .exerciseBox,
      .principleBox {
        margin-top: 15px;
      }
    }
    .principle {
      padding-bottom: 10px;
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .titBtn {
          display: flex;
          align-items: center;
          .titBtnLeft,
          .titBtnRight {
            display: flex;
            align-items: center;
            margin: 0 5px;
          }
          img {
            width: 15px;
          }
          p {
            margin: 0 5px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-size: 12px;
            color: #404040;
          }
        }
      }
      .video{
        position: relative;
        .del_video{
          padding: 3px 5px;
          border-radius: 3px;
          background: #1989fa;
          color: #fff;
          position: absolute;
          top: 5px;
          right: 5px;
          z-index: 100;
        }
        .video-js {
          width: 100%;
          height: 150px;
          margin: 10px 0 0 0;
          .video-player {
            border-radius: 5px;
          }
          .vjs-big-play-button {
            font-size: 3em;
            line-height: 44px;
            height: 44px;
            width: 44px;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -22px;
            margin-left: -22px;
            padding: 0;
            cursor: pointer;
            opacity: 1;
            border: 0.06666em solid #fff;
            background-color: #2b333f;
            background-color: rgba(43, 51, 63, 0.7);
            border-radius: 50%;
            -webkit-transition: all 0.4s;
            transition: all 0.4s;
          }
        }
      } 
      
    }
    .dietprescription {
      padding-bottom: 15px;
    }
    .van-button {
      width: 100%;
      margin-top: 20px;
      border-radius: 3px;
      font-size: 16px;
      height: 50px;
      line-height: 50px;
    }
    .yd_textarea {
      margin-top: 10px;
      padding: 10px;
      border-radius: 4px;
      background: #f5f5f5;
      color: #999;
      .van-cell {
        padding: 0;
      }
      div {
        background: #f5f5f5;
      }
      textarea {
        background: #f5f5f5;
      }
    }
  }
  .van-cell--required::before{
    left: 0;
  }
 .main .dietprescription .van-cell .van-field__label {
    font-size: 15px;
    margin-left: 5px;
    width: 60px !important;
  }
  .break {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ebedf0;
  }

 .button_bom{
   border-bottom: 1px solid #ebedf0;
 }
}


</style>
